<template>
  <div class="guodu02-container">
    <h1>Vue 过渡动画 - 滑动过渡</h1>
    
    <!-- 控制面板 -->
    <div class="control-panel">
      <div class="control-group">
        <label>滑动方向：</label>
        <select v-model="direction">
          <option v-for="dir in directions" :key="dir" :value="dir">
            {{ dir === 'left' ? '左滑' : dir === 'right' ? '右滑' : dir === 'up' ? '上滑' : '下滑' }}
          </option>
        </select>
      </div>
      
      <div class="control-group">
        <label>动画时长：</label>
        <input type="range" v-model="duration" min="100" max="2000" step="100">
        <span>{{ duration }}ms</span>
      </div>
      
      <div class="control-group">
        <label>滑动距离：</label>
        <input type="range" v-model="distance" min="50" max="300" step="10">
        <span>{{ distance }}px</span>
      </div>
      
      <div class="control-group">
        <label>缓动函数：</label>
        <select v-model="easing">
          <option value="ease">ease</option>
          <option value="ease-in">ease-in</option>
          <option value="ease-out">ease-out</option>
          <option value="ease-in-out">ease-in-out</option>
          <option value="cubic-bezier(0.25, 0.8, 0.25, 1)">cubic-bezier</option>
        </select>
      </div>
      
      <div class="control-group">
        <label>
          <input type="checkbox" v-model="withOpacity">
          包含透明度变化
        </label>
      </div>
    </div>

    <!-- 演示区域 -->
    <div class="demo-section">
      <h3>单个元素演示</h3>
      <div class="demo-area">
        <button @click="show = !show" class="toggle-btn">
          {{ show ? '隐藏' : '显示' }} 元素
        </button>
        
        <div class="transition-container">
          <Transition :name="`slide-${direction}`">
            <div v-if="show" class="demo-box" :class="direction">
              滑动方向: {{ direction }}
            </div>
          </Transition>
        </div>
      </div>
      
      <h3>多个元素演示</h3>
      <div class="demo-area">
        <button @click="showAll = !showAll" class="toggle-btn">
          {{ showAll ? '隐藏' : '显示' }} 所有元素
        </button>
        
        <div class="multi-demo">
          <div v-for="dir in directions" :key="dir" class="direction-demo">
            <h4>{{ dir === 'left' ? '左滑' : dir === 'right' ? '右滑' : dir === 'up' ? '上滑' : '下滑' }}</h4>
            <div class="transition-container">
              <Transition :name="`slide-${dir}`">
                <div v-if="showAll" class="mini-box" :class="dir">
                  {{ dir }}
                </div>
              </Transition>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 状态显示 -->
    <div class="status-panel">
      <h3>当前状态</h3>
      <div class="status-grid">
        <div class="status-item">
          <span class="label">过渡名称：</span>
          <span class="value">slide-{{ direction }}</span>
        </div>
        <div class="status-item">
          <span class="label">动画时长：</span>
          <span class="value">{{ duration }}ms</span>
        </div>
        <div class="status-item">
          <span class="label">滑动距离：</span>
          <span class="value">{{ distance }}px</span>
        </div>
        <div class="status-item">
          <span class="label">缓动函数：</span>
          <span class="value">{{ easing }}</span>
        </div>
        <div class="status-item">
          <span class="label">透明度变化：</span>
          <span class="value">{{ withOpacity ? '是' : '否' }}</span>
        </div>
      </div>
    </div>

    <!-- 代码示例 -->
    <div class="code-section">
      <h3>代码示例</h3>
      <pre><code>&lt;template&gt;
  &lt;Transition name="slide-{{ direction }}"&gt;
    &lt;div v-if="show" class="element"&gt;内容&lt;/div&gt;
  &lt;/Transition&gt;
&lt;/template&gt;

&lt;style&gt;
.slide-{{ direction }}-enter-active,
.slide-{{ direction }}-leave-active {
  transition: all {{ duration }}ms {{ easing }};
}

.slide-{{ direction }}-enter-from {
  transform: translate{{ direction === 'left' || direction === 'right' ? 'X' : 'Y' }}({{ direction === 'left' || direction === 'up' ? '-' : '' }}{{ distance }}px);{{ withOpacity ? '\n  opacity: 0;' : '' }}
}

.slide-{{ direction }}-leave-to {
  transform: translate{{ direction === 'left' || direction === 'right' ? 'X' : 'Y' }}({{ direction === 'left' || direction === 'up' ? '-' : '' }}{{ distance }}px);{{ withOpacity ? '\n  opacity: 0;' : '' }}
}
&lt;/style&gt;</code></pre>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'GuoDu02',
  setup() {
    const show = ref(true)
    const showAll = ref(true)
    const direction = ref('left')
    const duration = ref(300)
    const distance = ref(100)
    const easing = ref('cubic-bezier(0.25, 0.8, 0.25, 1)')
    const withOpacity = ref(true)
    const directions = ['left', 'right', 'up', 'down']

    // 计算属性用于CSS v-bind
    const negativeDistanceX = computed(() => `-${distance.value}px`)
    const positiveDistanceX = computed(() => `${distance.value}px`)
    const negativeDistanceY = computed(() => `-${distance.value}px`)
    const positiveDistanceY = computed(() => `${distance.value}px`)
    const durationMs = computed(() => `${duration.value}ms`)
    const opacityValue = computed(() => withOpacity.value ? 0 : 1)

    return {
      show,
      showAll,
      direction,
      duration,
      distance,
      easing,
      withOpacity,
      directions,
      negativeDistanceX,
      positiveDistanceX,
      negativeDistanceY,
      positiveDistanceY,
      durationMs,
      opacityValue
    }
  }
}
</script>

<style scoped>
.guodu02-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 2.5em;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.control-panel {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-group label {
  font-weight: 600;
  color: #34495e;
  font-size: 14px;
}

.control-group select,
.control-group input[type="range"] {
  padding: 8px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.control-group select:focus,
.control-group input[type="range"]:focus {
  outline: none;
  border-color: #3498db;
}

.demo-section {
  margin-bottom: 30px;
}

.demo-section h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.5em;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.demo-area {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.toggle-btn {
  background: linear-gradient(45deg, #3498db, #2ecc71);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 20px;
}

.toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.transition-container {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ddd;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.demo-box {
  width: 200px;
  height: 100px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  text-align: center;
}

.demo-box.left { background: linear-gradient(45deg, #FF6B6B, #FF8E53); }
.demo-box.right { background: linear-gradient(45deg, #4ECDC4, #44A08D); }
.demo-box.up { background: linear-gradient(45deg, #A8E6CF, #7FCDCD); }
.demo-box.down { background: linear-gradient(45deg, #FFD93D, #FF6B6B); }

.multi-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.direction-demo h4 {
  text-align: center;
  color: #34495e;
  margin-bottom: 10px;
}

.mini-box {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.mini-box.left { background: linear-gradient(45deg, #FF5722, #FF9800); }
.mini-box.right { background: linear-gradient(45deg, #2196F3, #21CBF3); }
.mini-box.up { background: linear-gradient(45deg, #4CAF50, #8BC34A); }
.mini-box.down { background: linear-gradient(45deg, #9C27B0, #E91E63); }

.status-panel {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.status-panel h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.status-item .label {
  font-weight: 600;
  color: #34495e;
}

.status-item .value {
  color: #3498db;
  font-weight: 500;
}

.code-section {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.code-section h3 {
  color: #ecf0f1;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.code-section pre {
  background: #34495e;
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* 左滑动画 */
.slide-left-enter-active, .slide-left-leave-active {
  transition: all v-bind(durationMs) v-bind(easing);
}
.slide-left-enter-from {
  transform: translateX(v-bind(negativeDistanceX));
  opacity: v-bind(opacityValue);
}
.slide-left-leave-to {
  transform: translateX(v-bind(negativeDistanceX));
  opacity: v-bind(opacityValue);
}

/* 右滑动画 */
.slide-right-enter-active, .slide-right-leave-active {
  transition: all v-bind(durationMs) v-bind(easing);
}
.slide-right-enter-from {
  transform: translateX(v-bind(positiveDistanceX));
  opacity: v-bind(opacityValue);
}
.slide-right-leave-to {
  transform: translateX(v-bind(positiveDistanceX));
  opacity: v-bind(opacityValue);
}

/* 上滑动画 */
.slide-up-enter-active, .slide-up-leave-active {
  transition: all v-bind(durationMs) v-bind(easing);
}
.slide-up-enter-from {
  transform: translateY(v-bind(negativeDistanceY));
  opacity: v-bind(opacityValue);
}
.slide-up-leave-to {
  transform: translateY(v-bind(negativeDistanceY));
  opacity: v-bind(opacityValue);
}

/* 下滑动画 */
.slide-down-enter-active, .slide-down-leave-active {
  transition: all v-bind(durationMs) v-bind(easing);
}
.slide-down-enter-from {
  transform: translateY(v-bind(positiveDistanceY));
  opacity: v-bind(opacityValue);
}
.slide-down-leave-to {
  transform: translateY(v-bind(positiveDistanceY));
  opacity: v-bind(opacityValue);
}
</style>